<template>
  <div class="company-job-edit">
    <Panel>
      <el-form
        class="company-info-form"
        ref="form"
        :model="formData"
        :rules="rules"
        label-width="100px"
        label-position="top"
      >
        <div class="info-group">
          <div class="info-group-title">发布岗位/编辑岗位</div>
          <div class="info-group-content">
            <el-row>
              <el-col :span="8" :offset="3">
                <el-form-item prop="jobType" :label="$t('job.jobType')">
                  <el-select
                    v-model="formData.jobType"
                    :placeholder="$tSelect()"
                  >
                    <el-option
                      v-for="item in $enumList('JOB_TYPE')"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="2">
                <el-form-item prop="major" :label="$t('job.major')">
                  <el-select v-model="formData.major" :placeholder="$tSelect()">
                    <el-option
                      v-for="item in dictData['job_major']"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8" :offset="3">
                <el-form-item prop="jobTags" :label="$t('job.jobTags')">
                  <el-select
                    v-model="formData.jobTags"
                    :placeholder="$tSelect()"
                  >
                    <el-option
                      v-for="item in dictData['job_tags']"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="2">
                <el-form-item prop="jobName" :label="$t('job.name')">
                  <el-input v-model="formData.jobName" :placeholder="$tInput()">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8" :offset="3">
                <el-form-item
                  prop="boardAndLodging"
                  :label="$t('job.boardAndLodging')"
                >
                  <el-select
                    v-model="formData.boardAndLodging"
                    :placeholder="$tSelect()"
                  >
                    <el-option
                      v-for="item in $enumList('BOOL')"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="2">
                <el-form-item prop="salary" :label="$t('job.salary')">
                  <el-select
                    v-model="formData.salary"
                    :placeholder="$tSelect()"
                  >
                    <el-option
                      v-for="item in dictData['salary_scope']"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8" :offset="3">
                <el-form-item prop="area" :label="$t('job.address')">
                  <el-cascader
                    v-model="formData.area"
                    :options="areaOptions"
                    :props="{ value: 'name', label: 'name' }"
                  ></el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="2">
                <el-form-item
                  prop="housingAccumulationFund"
                  :label="$t('job.housingAccumulationFund')"
                >
                  <el-select
                    v-model="formData.housingAccumulationFund"
                    :placeholder="$tSelect()"
                  >
                    <el-option
                      v-for="item in $enumList('BOOL')"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8" :offset="3">
                <el-form-item prop="gender" :label="$t('job.gender')">
                  <el-select
                    v-model="formData.gender"
                    :placeholder="$tSelect()"
                  >
                    <el-option label="男" value="男" />
                    <el-option label="女" value="女" />
                    <el-option label="不限" value="不限" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="2">
                <el-form-item prop="age" :label="$t('job.age')">
                  <el-select v-model="formData.age" :placeholder="$tSelect()">
                    <el-option
                      v-for="item in dictData['age_scope']"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8" :offset="3">
                <el-form-item
                  prop="workExperience"
                  :label="$t('job.workExperience')"
                >
                  <el-select
                    v-model="formData.workExperience"
                    :placeholder="$tSelect()"
                  >
                    <el-option
                      v-for="item in dictData['work_experience']"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="2">
                <el-form-item
                  prop="recruiterNum"
                  :label="$t('job.recruiterNum')"
                >
                  <el-input-number
                    v-model="formData.recruiterNum"
                    :placeholder="$tInput()"
                  >
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8" :offset="3">
                <el-form-item prop="minEdu" :label="$t('job.minEdu')">
                  <el-select
                    v-model="formData.minEdu"
                    :placeholder="$tSelect()"
                  >
                    <el-option
                      v-for="item in dictData['min_edu']"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="2">
                <el-form-item prop="dueDate" :label="$t('job.dueDate')">
                  <el-date-picker
                    v-model="formData.dueDate"
                    type="date"
                    :placeholder="$tSelect()"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="info-group">
          <div class="info-group-title">岗位介绍</div>
          <div class="info-group-content">
            <el-row>
              <el-col :span="18" :offset="3">
                <el-form-item prop="intro">
                  <el-input
                    v-model="formData.intro"
                    type="textarea"
                    :rows="10"
                    :placeholder="$tInput()"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
      <div class="app-btns">
        <el-button
          size="small"
          type="primary"
          @click="submitForm"
          :loading="submiting"
          >保存</el-button
        >
      </div>
    </Panel>
  </div>
</template>

<script>
import { dictMixin } from 'mixins'
import { Panel } from 'components'
import { addJob, updateJob, getJobDetail } from 'services/company/job'
import { allArea } from 'services/common'
import { strToDate } from 'utils'
export default {
  name: 'CompanyJobEdit',
  mixins: [dictMixin],
  components: { Panel },
  dicts: [
    'job_major',
    'job_tags',
    'salary_scope',
    'age_scope',
    'work_experience',
    'min_edu'
  ],
  data() {
    return {
      formData: {},
      submiting: false,
      areaOptions: [],
      jobId: null
    }
  },
  computed: {
    isAdd() {
      return !this.jobId
    },
    rules() {
      return {
        jobType: this.$rule('job.jobType', {
          required: true
        }),
        major: this.$rule('job.major', {
          required: true
        }),
        jobTags: this.$rule('job.jobType', {
          required: true
        }),
        jobName: this.$rule('job.major', {
          required: true
        }),
        boardAndLodging: this.$rule('job.boardAndLodging', {
          required: true
        }),
        salary: this.$rule('job.salary', {
          required: true
        }),
        area: this.$rule('job.address', {
          required: true
        }),
        housingAccumulationFund: this.$rule('job.housingAccumulationFund', {
          required: true
        }),
        gender: this.$rule('job.gender', {
          required: true
        }),
        age: this.$rule('job.age', {
          required: true
        }),
        workExperience: this.$rule('job.workExperience', {
          required: true
        }),
        recruiterNum: this.$rule('job.recruiterNum', {
          required: true
        }),
        minEdu: this.$rule('job.minEdu', {
          required: true
        }),
        dueDate: this.$rule('job.dueDate', {
          required: true
        })
      }
    }
  },
  methods: {
    async initData() {
      try {
        this.areaOptions = await allArea()
        const id = this.$route.query.id
        this.jobId = id
        if (this.jobId) {
          const { data } = await getJobDetail({ id })
          data.dueDate = strToDate(data.dueDate)
          data.area = [data.province, data.city, data.county]
          this.formData = data
        }
      } catch {}
    },
    async submitForm() {
      try {
        await this.$refs.form.validate()
        const submitService = this.isAdd ? addJob : updateJob
        await submitService(this.formData)
      } catch {}
    }
  },
  created() {
    this.initData()
  }
}
</script>

<style lang="scss">
@import 'styles/common.scss';
.company-job-edit {
  .el-form--label-top .el-form-item__label {
    padding-bottom: 0;
  }
}
</style>
